<template>
	<view>
			<view>
				<uni-transition  :show="show1" :mode-class="modeClass" class="ellipse1" duration="1900">
				</uni-transition>
			</view>
			<view>
				<uni-transition  :show="show1" :mode-class="modeClass" class="ellipse" duration="1900">
			</uni-transition>
			</view>
			
			
		<uni-transition  :show="show1" :mode-class="modeClass1" duration="1500">
			<view class="login">
				<text>M·S·Tick</text>
			</view>
				<view class="line">

				</view>
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view class="uni-input-wrapper1">
			        <input class="uni-input" name="email" placeholder="E-mail" placeholder-style="color: #cccccc;font-size:22rpx;font-family: 'Arial Normal', 'Arial', sans-serif;" :value="inputClearValue" @input="clearInput" />
			        <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
					<image class="icon" src=""></image>
					</view>
				</view> 
				<view class="uni-form-item uni-column">
					<view class="uni-input-wrapper2">
			        <input class="uni-input" name="pwd" placeholder="password" placeholder-style="color: #cccccc;font-size:22rpx;font-family: 'Arial Normal', 'Arial', sans-serif;" :password="showPassword" />
			        <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
					<image class="icon" src=""></image>
					</view>
				</view>
				<text class="fgtpwd" @click="forgetpwd">Forget password</text>
				<button form-type="submit">Sign in</button>
			</form>
			
			
		</uni-transition>
		
	</view>
</template>

<script>
	import {realLogin} from '../../api/login/realLogin.js'
	export default {
	    data() {
	        return {
	            title: 'input',
	            focus: false,
				test:12,
	            inputValue: '',
	            showClearIcon: false,
	            inputClearValue: '',
	            changeValue: '',
	            showPassword: true,
	            src: '../../../static/eye-1.png',
	            platform: '',
	            isNvue: false,
				show1:true,
				modeClass:['fade'],
				modeClass1:['zoom-in'],
				error:''
	        }
	    },
	    methods: {
			forgetpwd(){
				uni.navigateTo({
					url:"../ForgetPwd/ForgetPwd"
				})
			},
	        onKeyInput: function(event) {
	            this.inputValue = event.detail.value
	        },
	        hideKeyboard: function(event) {
	            if (event.detail.value === '123') {
	                uni.hideKeyboard();
	            }
	        },
	        clearInput: function(event) {
	            this.inputClearValue = event.detail.value;
	            if (event.detail.value.length > 0) {
	                this.showClearIcon = true;
	            } else {
	                this.showClearIcon = false;
	            }
	        },
	        clearIcon: function() {
	            this.inputClearValue = '';
	            this.showClearIcon = false;
	        },
	        changePassword: function() {
	            this.showPassword = !this.showPassword;
	        },
	        onFocus() {
	            this.$mp.page.$getAppWebview().setStyle({
	                softinputNavBar: 'none'
	            })
	        },
	        onBlur() {
	            this.$mp.page.$getAppWebview().setStyle({
	                softinputNavBar: 'auto'
	            })
	        },
			formSubmit: function(e){
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var rule=[
					{name:"email",checkType: 'email', errorMsg: 'Please enter the correct email address!'},
					{name:"pwd",checkType: "notnull",errorMsg: 'Please fill in your password!'},
				];
				var formdata=e.detail.value;
				var checkRes = this.check(formdata,rule);
				if(checkRes)
					{
						uni.showToast({title:"Verification by!", icon:"none"});
						//接接口
						console.log(e.detail.value.pwd)
						var params={emailaddress:e.detail.value.email,password:e.detail.value.pwd};
						realLogin(params).then(res=>{
							console.log("heheh");
							uni.hideLoading();
							if(res.data.message=='Token creat success'){
								uni.showToast({title:"Verification by!", icon:"none"});
								//跳转页面
								
								uni.switchTab({
									url:'../Clock/ClockIn',
									fail: (res) => {
									                    console.log(res)//打印错误信息
									                }
								})

							}else if(res.data.message=='User infomation invailed'){
								uni.showToast({title:"User infomation invailed", icon:"none"});
							}else if(res.data.message=='wrong password'){
								uni.showToast({title:res.data.message, icon:"none"});
							}
						})
					}else{
						uni.showToast({ title: this.error, icon: "none" });
					}
			},
				check: function (data, rule){
					for(var i = 0; i < rule.length; i++){
						if (!rule[i].checkType){return true;}
						if (!rule[i].name) {return true;}
						if (!rule[i].errorMsg) {return true;}
						if (!data[rule[i].name]) {this.error = rule[i].errorMsg; return false;}
						switch (rule[i].checkType){
							case 'int':
								var reg = new RegExp('^(-[1-9]|[1-9])[0-9]{' + rule[i].checkRule + '}$');
								if(!reg.test(data[rule[i].name])) {this.error = rule[i].errorMsg; return false;}
								break;
							break;
							case 'email':
								var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
								if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
							break;
							case 'notnull':
								if(data[rule[i].name] == null || data[rule[i].name].length < 1){this.error = rule[i].errorMsg; return false;}
							break;
						}
					}
					return true;
				},
			
	    },
	    onLoad() {
	        this.platform = uni.getSystemInfoSync().platform
	        // #ifdef APP-PLUS-NVUE
	        this.isNvue = true
	        // #endif
	    },
		Login:function(){
			uni.navigateTo({
				url:"../homepage/homepage"
			})
		}
	}
</script>

<style>
	
	.ellipse{
		width: 528rpx;
		height: 490rpx;
		background-color: #abc270;
		border-radius: 50%;
		margin-top: -450rpx;
		margin-left: 300rpx;
		z-index:2;
	}
	.ellipse1{
		width: 528rpx;
		height: 490rpx;
		background-color: #fec868;
		border-radius: 50%;
		margin-top: -230rpx;
		margin-left: -40rpx;
		opacity: 0.85;
	}
	.fgtpwd{
		width: 36px;
		height: 50px;
		color: #cccccc;
		font-family: '微软雅黑', sans-serif;
		font-size: 20rpx;
		position: relative;
		right: -540rpx;
	}
	.icon{
		position:absolute;
		left: 30rpx;
		width: 32px;
		height: 16px;
		color: #cccccc;
		opacity: 0.3;
	}

	.login{
		  height: 0.5rpx;
		  background-color: rgba(255, 255, 255, 0);
		  font-family: 'Arial Normal', 'Arial', sans-serif;
		  font-weight: 600;
		  color: #473c33;
		  text-align: center;
		  position: relative;
		  margin-top: 140rpx;
		  font-size:75rpx;
	}

	.page{
			background-color: #f2f2f2;
		}
	.uni-input {
        height: 28px;
        line-height: 28px;
        font-size: 15px;
        padding: 0px;
        flex: 1;
        background-color: #FFFFFF;
		border-bottom:1px solid #e4e4e4;
    }
	.uni-input-wrapper1 {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        padding: 8px 55px;
        flex-direction: row;
        flex-wrap: nowrap;
        background-color: #FFFFFF;
		justify-content:center;
		align-items:center;
		margin-top:50px;
    }	
	.uni-input-wrapper2 {
	    /* #ifndef APP-NVUE */
	    display: flex;
	    /* #endif */
	    padding: 8px 55px;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    background-color: #FFFFFF;
		justify-content:center;
		align-items:center;
		text-align: 100rpx;
	   }	
	.title {
        padding: 5px 13px;
    }
    button {
        margin-top: 75rpx;
        margin-bottom: 10rpx;
		width:500rpx;
		height: 80rpx;
		background-color:#abc270;
		color: #fefefe;
		border-radius:168rpx;
		font-size:15px;
		border:#ffffff;
		text-align: center;
		opacity: 0.95;
		padding: 2px 2px 2px 2px;
/* 		opacity: 0.85; */
    }
	.uni-icon{
		color: #cccccc;
	}
	.line{
	  float:right;
	  width: 80%;
	  height: 3rpx;
	  margin-top: 150rpx;
	  background:#e4e4e4;
	  position: relative;
	  margin-right:  70rpx ;
	  text-align: center;
	}

</style>
